<template>
  <div class="check_details_container">
    <my-header
      class="page_header"
      ref="header"
      :isBack="true"
      :backText="showTurn ? '点巡检转办' : ''"
      :centerTitleText="showTurn ? '' : '点巡检任务详情'"
      :is_Level_three_page="true"
      :hadInput="false"
      @backFn="back"
    ></my-header>

    <div class="my_dialog" :style="{ top: headerHeight + 'px' }">
      <transition name="slide">
        <div v-show="showTurn">
          <select-person
            :offsetTop="headerHeight"
            selectTitle="请选择转办人"
            :turnCheckId="turnCheckId"
            :workSheetType="turnType"
            @closeSelectPersonFn="closeTurnFn"
            @changeIsRefreshSelectComponent="changeIsRefreshSelectComponent"
            @resetUpScroll="resetMeScrollChild"
          ></select-person>
        </div>
      </transition>
    </div>

    <div class="deviceInfo">
      <div class="info_list">
        <ul class="info">
          <li>
            <p class="title" style="font-size: 18px;">巡检对象:</p>
            <p class="titleContent" style="font-size: 18px;">{{ deviceName }}</p>
          </li>
          <li>
            <p class="title">巡检类型:</p>
            <p class="titleContent">{{ type }}</p>
          </li>
          <li>
            <p class="title">部门:</p>
            <p class="titleContent">{{ departmentName }}</p>
          </li>
        </ul>
      </div>

      <div class="components overdue" v-if="viewType < 3">
        <div class="status-tabs" v-if="viewType === 1">
          <div
            class="status-tab"
            tab-indx="1"
            :class="{ 'active-status-tab': activeStatusTab == 1 }"
            @click="switchStatusTab(1)"
          >
            未完成({{ processingNum ? processingNum : 0 }})
          </div>
          <div
            class="status-tab"
            tab-indx="2"
            :class="{ 'active-status-tab': activeStatusTab == 2 }"
            @click="switchStatusTab(2)"
          >
            已完成({{ finishedNum ? finishedNum : 0 }})
          </div>
        </div>
        <div class="overdue-title" v-else-if="viewType === 2">
          <span>已完成({{ finishedNum ? finishedNum : 0 }})</span>
        </div>

        <div class="overdue-title" v-if="stopStepList.length">
          <span>&nbsp;</span>
          <span class="batch-btn" @click="viewType = 4">
            暂停任务({{ stopStepList.length || 0 }})
          </span>
        </div>
        <div class="overdue-list">
          <iu-card
            class="overdue-card"
            v-for="(item, index) in componentList"
            @click.native="componentCheckInfoDetailPage(item)"
            :key="index"
            tip-type="warning"
          >
            <template #title>
              <span class="title-label">
                {{ item.checkType == 2 ? "设备" : "部件" }}
              </span>
              <span>
                {{ item.checkType == 2 ? deviceName : item.componentName }}
              </span>
            </template>
            <template #body>
              <div class="overdue-card-body">
                <div class="body-item">
                  <span class="ellipsis" v-if="item.status == 7">
                    负责人：{{ item.operatorName }}
                  </span>
                  <span class="ellipsis" v-else-if="item.status == 9">
                    处理人：{{ item.overdueDisposeUserName }}
                  </span>
                  <span class="ellipsis" v-else-if="item.leaderList">
                    负责人：{{ item.leaderList.map(e => e.name).join(" , ") }}
                  </span>
                </div>
                <div class="body-other">
                  <span class="body-item-key body-item-handle">
                    <template v-if="viewType == 1 && activeStatusTab == 1">
                      <p class="time" v-if="item.status == 3">
                        剩余时间： {{ item.surplusTime }}
                      </p>
                      <p class="time" v-else-if="item.status == 5">
                        逾期时间： {{ item.surplusTime }}
                      </p>
                      <p class="time" v-else-if="item.status == 4">
                        时间：{{
                          item.startTime | formaDateH
                        }}点&nbsp;至&nbsp;{{ item.endTime | formaDateH }}点
                      </p>
                    </template>
                    <p
                      class="time"
                      v-else-if="viewType == 2 || activeStatusTab == 2"
                    >
                      <template v-if="item.status == 7">
                        提交时间：
                        {{ item.checkSubmitTime | formaDateHms }}
                      </template>
                      <template v-else-if="item.status == 9">
                        处理时间：
                        {{ item.overdueDisposeTime | formaDateHms }}
                      </template>
                    </p>
                    <div class="handle-btn">
                      <span
                        class="btn"
                        v-if="hasTag(item.checkLeaderIds) && item.status != 5"
                        @click.stop="chooseTransfer(item, index)"
                      >
                        转办
                      </span>
                      <span
                        class="btn"
                        v-if="
                          hasTag(item.checkLeaderIds) &&
                            item.clockStatus != 0 &&
                            item.status == 3
                        "
                        @click.stop="componentCheckInfo(item, index)"
                        style="margin-left:8px"
                      >
                        执行
                      </span>
                    </div>
                  </span>
                </div>
              </div>
            </template>
            <template #tip>
              <span class="tip" :class="'status'+item.status">
                {{ item.statusName }}
              </span>
            </template>
          </iu-card>
        </div>
      </div>
      <div v-else-if="viewType == 3" class="overdue">
        <div class="overdue-title">
          <span>已逾期({{ deviceUndoCheckList.length || 0 }}) </span>
          <span
            class="batch-btn"
            v-if="deviceUndoCheckList.length && privilege('wechat_operaionManage','wechat_operaionManage:overdue_list_mange')"
            @click="eventOverdueHandle(deviceUndoCheckList, 1)"
          >
            批量处理
          </span>
        </div>
        <div class="overdue-list">
          <iu-card
            class="overdue-card"
            v-for="item in deviceUndoCheckList"
            :key="item.id"
            tip-type="warning"
          >
            <template #title>
              {{
                item.checkType == 2
                  ? "设备： " + deviceName
                  : "部件： " + item.componentName
              }}
            </template>
            <template #body>
              <div class="overdue-card-body">
                <div class="body-item">
                  <span class="body-item-key">逾期时间：</span>
                  <span class="body-item-value">
                    {{ item.endTime | formatDate("YYYY-MM-DD HH:mm") }}
                  </span>
                  <span class="body-item-state" v-if="item.shift">
                    {{ item.shift }}
                  </span>
                </div>
                <div class="body-other">
                  <span class="body-item-key body-item-handle">
                    <span class="ellipsis" v-if="item.leaderList">
                      负责人：{{ item.leaderList.map(e => e.name).join(" , ") }}
                    </span>
                    <span class="ellipsis" v-else-if="item.operatorName">
                      负责人：{{ item.operatorName }}
                    </span>
                    <div class="handle-btn" v-if="privilege('wechat_operaionManage','wechat_operaionManage:overdue_list_mange')">
                      <span class="btn" @click="eventOverdueHandle([item], 0)">
                        处理
                      </span>
                    </div>
                  </span>
                </div>
              </div>
            </template>
            <template #tip>
              <span class="tip">
                {{ item.statusName }}
              </span>
            </template>
          </iu-card>
        </div>
      </div>
      <div v-else-if="viewType == 4" class="overdue">
        <div class="overdue-title">
          <span>暂停任务({{ stopStepList.length || 0 }}) </span>
        </div>
        <div class="overdue-list">
          <iu-card
            class="overdue-card"
            v-for="item in stopStepList"
            :key="item.id"
            tip-type="warning"
            full
          >
            <template #title> {{ type }}：{{ deviceName }} </template>
            <template #body>
              <div class="overdue-card-body">
                <div class="body-item" style="margin-bottom: 6px;">
                  <span class="body-item-key">停止时间：</span>
                  <span class="body-item-value">
                    {{ item.startTime | formatDate("YYYY.MM.DD HH:mm") }}
                    -
                    {{ item.endTime | formatDate("YYYY.MM.DD HH:mm") }}
                  </span>
                  <span class="body-item-state" v-if="item.shift">
                    {{ item.shift }}
                  </span>
                </div>
                <div class="body-item" style="margin-bottom: 6px;">
                  <span class="body-item-key body-item-handle">
                    <span class="ellipsis">
                      提交人：{{ item.submitterName }}
                    </span>
                  </span>
                </div>
                <div class="body-item" style="margin-bottom: 6px;">
                  <span class="body-item-key body-item-handle">
                    <span> 停止原因：{{ item.remark }} </span>
                  </span>
                </div>
                <div
                  class="body-item modifiy-btn"
                  style="margin-bottom: 6px;"
                  v-if="privilege('wechat_operaionManage','wechat_operaionManage:stop_plan')"
                >
                  <span class="handle-btn" @click="eventPutStopStep(item)">
                    修改计划
                  </span>
                  <span class="handle-btn" @click="eventDeleteStopStep(item)">
                    删除计划
                  </span>
                </div>
              </div>
            </template>
            <template #tip>
              <span class="tip">
                {{ item.statusName }}
              </span>
            </template>
          </iu-card>
        </div>
      </div>
    </div>
    <div v-transfer-dom>
      <x-dialog v-model="popupShow" class="operator-dialog" hide-on-blur>
        <div class="main">负责人：{{ popupContent }}</div>
        <x-button plain @click.native="popupShow = false">关闭</x-button>
      </x-dialog>
    </div>
    <div v-transfer-dom>
      <confirm
        v-model="overdueHandleDialog"
        :title="batchTag ? '批量处理' : '逾期处理'"
        :close-on-confirm="false"
        @on-cancel="handleOverdueHandle(0)"
        @on-confirm="handleOverdueHandle(1)"
        class="overdue-handle-confirm"
      >
        <div class="searchItem">
          <div class="inner">
            <span><span style="color:#ff2c2c">*</span>逾期原因：</span>
            <select
              class="iu-select"
              placeholder="请选择逾期原因"
              v-model="overdueHandleForm.overdueDisposeReson"
              required
            >
              <option disabled selected hidden value>- 请选择逾期原因</option>
              <option v-for="item in reasonList" :value="item" :key="item">
                {{ item }}
              </option>
            </select>
          </div>
          <div class="inner">
            <span>责任人：</span>
            <select
              class="iu-select"
              v-model="overdueHandleForm.overdueLeaderUserId"
              required
            >
              <option disabled selected hidden value>- 请选择责任人</option>
              <option
                v-for="item in personList"
                :value="item.id"
                :key="item.id"
              >
                {{ item.name }}
              </option>
            </select>
          </div>
          <div class="inner">
            <span><span style="color:#ff2c2c">*</span>处理描述： </span>
            <x-textarea
              v-model="overdueHandleForm.overdueDisposeDesc"
              class="textarea"
              :max="200"
              name="description"
            ></x-textarea>
          </div>
          <div
            class="title"
            @click="
              overdueHandleForm.isWorkSheet = overdueHandleForm.isWorkSheet
                ? null
                : 1
            "
          >
            <x-icon
              v-if="!overdueHandleForm.isWorkSheet"
              type="ios-circle-outline"
              size="18"
              fill="#999"
            ></x-icon>
            <x-icon
              v-else-if="overdueHandleForm.isWorkSheet"
              type="ios-circle-filled"
              size="18"
              fill="#333"
            ></x-icon>
            <span style="margin-left:4px">
              是否需要重新巡检，并生成巡检工单
            </span>
          </div>
        </div>
      </confirm>
    </div>

    <div v-transfer-dom>
      <confirm
        v-model="stopStepDialog"
        title="修改暂停计划"
        :close-on-confirm="false"
        @on-cancel="handleStopStep(0)"
        @on-confirm="handleStopStep(1)"
        class="overdue-handle-confirm"
      >
        <div class="searchItem">
          <div class="inner">
            <span>部门：</span>
            <div class="curSelectItem">
              <div class="department_box">
                <div class="department_select">
                  <p class="department_name">
                    {{ departmentName }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="inner">
            <span>暂停时间：</span>
            <div class="time">
              <div class="time-span" @click="selectTime(0)">
                {{
                  (stopStepForm.startTime &&
                    stopStepForm.startTime.format("YYYY.MM.DD HH:mm")) ||
                    "&nbsp;"
                }}
              </div>
              <div class="time-text">至</div>
              <div class="time-span" @click="selectTime(1)">
                {{
                  (stopStepForm.endTime &&
                    stopStepForm.endTime.format("YYYY.MM.DD HH:mm")) ||
                    "&nbsp;"
                }}
              </div>
            </div>
          </div>
          <div class="inner">
            <span>暂停原因：</span>
            <x-textarea
              v-model="stopStepForm.remark"
              class="textarea"
              :max="200"
              name="description"
            ></x-textarea>
          </div>
        </div>
      </confirm>
    </div>

    <div v-transfer-dom>
      <confirm
        v-model="deleteStopStepDialog"
        title="删除停车计划"
        @on-cancel="handleDeleteStopStep(0)"
        @on-confirm="handleDeleteStopStep(1)"
      >
        <p style="text-align:center;">
          确认删除停车计划？删除后将恢复暂停计划内的所有的巡检任务。
        </p>
      </confirm>
    </div>
  </div>
</template>

<script>
import myHeader from "@/components/common/header";
import selectPerson from "@/components/common/select/selectPerson";
import listCard from "@/components/common/listCard";
import iuCard from "@/components/common/card/index";
import depTree from "@/components/common/tree";
import {
  Previewer,
  TransferDom,
  XDialog,
  XButton,
  XTextarea,
  CheckIcon,
  Confirm
} from "vux";
import SpotCheckDao from "@/daos/spotCheckDao";
import { GetUser,Privilege } from "@/mixin";
import dayjs from "dayjs";
var _this = null;
export default {
  directives: {
    TransferDom
  },
  components: {
    myHeader,
    selectPerson,
    Previewer,
    listCard,
    iuCard,
    depTree,
    XDialog,
    XTextarea,
    CheckIcon,
    Confirm,
    XButton
  },
  data() {
    return {
      demo1: false,
      hasExecute: false,
      isExecute: true, // 这样写是为了解决一进来未执行显示时间的模块闪烁消失体验
      deviceId: null,
      deviceName: "",
      batchTag: 0,
      departmentId: null,
      departmentName: "",
      type: "设备",
      viewType: null,
      deviceTypeName: "",
      detailsData: {},
      reasonList: ["漏检未检", "请假调休", "停车检修", "维修未检", "其它原因"],
      personList: [],
      stopStepList: [],
      overdueHandleForm: {
        overdueDisposeReson: "",
        overdueDisposeUserId: "",
        overdueLeaderUserId: "",
        overdueDisposeDesc: "",
        isWorkSheet: null,
        checkRecordIds: []
      },
      stopStepForm: {
        departmentId: "",
        startTime: "",
        endTime: "",
        submitter: 0,
        id: 0,
        remark: ""
      },
      workSheetDetail: [],
      preImgList: [],
      activeStatusTab: 1,
      processingNum: 100,
      finishedNum: 0,
      isRefreshSelectComponent: false,
      showTurn: false,
      overdueHandleDialog: false,
      deleteStopStepDialog: false,
      stopStepShowTree: false,
      stopStepDialog: false,
      deviceUndoCheckList: [],
      deviceFinishedCheckList: [],
      options: {},
      tabBoxHeight: 0,
      headerHeight: 0,
      mescrollUp: {
        use: true,
        isLock: true,
        onScroll: this.scrollFn,
        isBounce: false
      },
      mescrollChildDown: {
        use: true,
        warpClass: "my-downwarp",
        htmlContent:
          '<p class="downwarp-progress mescroll-rotate"></p><p class="downwarp-tip">加载中...</p>',
        onMoving: this.onMoving,
        afterLoading: this.showTotalNum,
        offset: 60,
        textOutOffset: "松开刷新"
      }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollChildUp: {
        // 上拉加载的配置.
        auto: false,
        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
        //以下是一些常用的配置,当然不写也可以的.
        isBounce: false,
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 20 //每页数据条数,默认10
        },
        htmlNodata: '<p class="myUpwarpNodata">没有更多了</p>',
        noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
        //避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        //这就是为什么无更多数据有时候不显示的原因
        toTop: {
          //回到顶部按钮
          //src: "./static/mescroll/mescroll-totop.png", //图片路径,默认null,支持网络图
          //offset: 1000 //列表滚动1000px才显示回到顶部按钮
        },
        empty: {
          //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
          // warpId: "list_content", //父布局的id (1.3.5版本支持传入dom元素)
          // icon: "./static/img/zwlr-icon.png", //图标,默认null,支持网络图
          // tip: "暂无内容" //提示
        },
        // warpId: 'upRefreshWarp',
        warpClass: "myScrollUpRefreshWarp",
        htmlLoading:
          '<p class="upRefreshProgress refreshRotate"></p> <p class="refresh-tip">加载中...</p>'
      },
      turnCheckId: null,
      turnType: null,
      popupShow: false,
      popupContent: ""
    };
  },
  mixins: [GetUser,Privilege],
  computed: {
    user() {
      return this.$store.state.user;
    },
    componentList() {
      let arr = [];

      if (this.viewType == 1 && this.activeStatusTab == 1) {
        arr = [].concat(this.deviceUndoCheckList);
      } else if (this.activeStatusTab == 2 || this.viewType == 2) {
        arr = [].concat(this.deviceFinishedCheckList);
      }
      return arr;
    }
  },
  activated() {
    this.init();
  },
  created() {
    _this = this;
    if (!this.$store.state.user) {
      this.getUser();
    }
  },
  mounted() {
    this.headerHeight = this.$refs.header.$el.offsetHeight;
    this.deviceId = this.$route.query.deviceId;
    this.deviceName = this.$route.query.deviceName;
    this.deviceTypeName = this.$route.query.deviceTypeName;
    this.departmentId = this.$route.query.departmentId;
    this.departmentName = this.$route.query.departmentName;
    this.viewType = +this.$route.query.viewType || 1;
    this.type = this.$route.query.type;
  },
  methods: {
    init() {
      this.getCheckList();
      this.getParkPlanDetailList();
    },
    changeIsRefreshSelectComponent() {
      this.isRefreshSelectComponent = false;
    },
    showTurnFn(checkId, type) {
      this.showTurn = true;
      this.isRefreshSelectComponent = true;
      this.turnCheckId = checkId;
      this.turnType = type + "";
    },
    closeTurnFn() {
      this.showTurn = false;
    },
    resetMeScrollChild() {
      // 重置列表数据及页码
      this.mescrollChildUp.page.num = 0;
      this.dataList = [];
      let upEmpty = document.querySelector(".myScrollUpRefreshWarp");
      if (upEmpty) {
        upEmpty.style.display = "none";
      }
      this.mescrollChild.resetUpScroll(false);
      if (document.querySelector(".total_num_view")) {
        document.querySelector(".total_num_view").style.display = "none";
      }
      if (document.querySelector(".downwarp-content")) {
        document.querySelector(".downwarp-content").style.display = "block";
      }
    },
    //判断执行按钮是否可以点击
    buttonExecute(isClock, status) {
      if (isClock && isClock != 0 && status == 0) {
        return true;
      }
      return false;
    },
    back() {
      if (this.showTurn) {
        this.showTurn = false;
      } else {
        //  this.$router.push({
        //   name: 'operaionManage'
        //  })

        // history.back(-1);
        this.$router.go(-1);
      }
    },
    switchStatusTab(index) {
      this.activeStatusTab = index;
      // this.getCheckList()
    },
    hasTag(checkLeaderIds) {
      if (checkLeaderIds) {
        return checkLeaderIds.split(",").includes(this.user.id);
      }
    },
    // 设备下所有部件点巡检记录
    componentCheckInfo(config, index) {
      console.log(config.status);
      if (config.status != 3) {
        return;
      }
      if (config.checkType == 3) {
        setTimeout(() => {
          this.$router.push({
            name: `addDeviceCheck`,
            query: {
              listType: 0,
              id: config.id,
              componentId: config.componentId,
              deviceId: this.deviceId,
              deviceName: this.deviceName,
              departmentId: config.departmentId,
              departmentName: this.departmentName
            }
          });
        }, 200);
      } else if (config.checkType == 2) {
        this.isActive = index;
        setTimeout(() => {
          this.$router.push({
            name: `addDeviceCheck`,
            query: {
              listType: 0,
              id: config.id,
              deviceId: this.deviceId,
              deviceName: this.deviceName,
              departmentId: config.departmentId,
              departmentName: this.departmentName
            }
          });
        }, 200);
      }
    },
    componentCheckInfoDetailPage(config) {
      // console.log(config);
      setTimeout(() => {
        this.$router.push({
          name: `workSheetDetail`,
          query: {
            id: config.id,
            deviceId: this.deviceId,
            departmentId: config.departmentId,
            type: config.checkType,
            cate:
              config.checkType == 1
                ? "departmentRecord"
                : config.checkType == 2
                ? "deviceRecord"
                : "componentRecord"
          }
        });
      }, 200);
    },
    getCheckList() {
      let _this = this;
      SpotCheckDao.getDivceCheckDetail(
        {
          deviceId: this.deviceId,
          viewType: this.viewType
        },
        data => {
          if (data) {
            _this.deviceUndoCheckList = data.undoList;
            _this.deviceFinishedCheckList = data.doneList;
            _this.processingNum = _this.deviceUndoCheckList.length;
            _this.finishedNum = _this.deviceFinishedCheckList.length;
          }
        }
      );
    },
    getParkPlanDetailList() {
      SpotCheckDao.getParkPlanDetailList(this.deviceId, data => {
        if (data) {
          this.stopStepList.splice(0, this.stopStepList.length);
          this.stopStepList = data;
        }
      });
    },
    // 转办
    chooseTransfer(config) {
      let type = "";
      if (config.checkType === 1) {
        type = "department";
      } else if (config.checkType === 2) {
        type = "device";
      } else {
        type = "component";
      }

      this.showTurnFn(config.id, config.checkType);
    },
    handleOperator(data) {
      // this.popupShow = true
      // let arr = []
      // data.forEach((item)=>{
      //   arr.push(item.name)
      // })
      // this.popupContent = arr.join(',')
    },
    stopStepDepChange(id, departmentName) {
      this.stopStepShowTreeDepartment = {
        departmentName,
        id
      };
    },
    stopStepDepShowTreeFn(status) {
      // console.log(status)
      if (status) {
        this.$refs.selece_icon.$el.style.transform = "rotate(-180deg)";
      } else {
        this.$refs.selece_icon.$el.style.transform = "rotate(0deg)";
      }
      this.showTree = status;
    },
    eventOverdueHandle(arr, tag) {
      this.batchTag = tag;
      this.overdueHandleForm.checkRecordIds.splice(
        0,
        this.overdueHandleForm.checkRecordIds.length
      );
      this.overdueHandleForm.checkRecordIds = arr.map(e => e.id);

      SpotCheckDao.getOverdueDisposePerson(
        { checkRecordIds: this.overdueHandleForm.checkRecordIds },
        data => {
          this.personList.splice(0, this.personList.length);
          let ids = [];
          data.forEach(element => {
            if (element && element.id) {
              if (!ids.includes(element.id)) {
                this.personList.push(element);
                ids.push(element.id);
              }
            }
          });
        }
      );
      this.overdueHandleDialog = true;
    },
    handleOverdueHandle(tag) {
      if (!tag) {
        this.overdueHandleFormInit();
        return;
      }
      let errMsg = "";
      if (!this.overdueHandleForm.overdueDisposeReson) {
        errMsg = "请选择逾期原因";
      } else if (!this.overdueHandleForm.overdueDisposeDesc) {
        errMsg = "请输入处理结果描述";
      } else if (
        this.overdueHandleForm.isWorkSheet &&
        !this.overdueHandleForm.overdueLeaderUserId
      ) {
        errMsg = "生成工单时请选择责任人";
      }
      if (errMsg) {
        this.$vux.toast.show({ text: errMsg, type: "warn" });
        return;
      }
      this.overdueHandleForm.overdueDisposeUserId = this.$store.state.user.id;
      SpotCheckDao.postOverdueDispose(this.overdueHandleForm, data => {
        this.$vux.toast.show({
          text: this.overdueHandleForm.isWorkSheet
            ? "提交成功，已生成工单"
            : "提交成功",
          type: "success"
        });
        this.overdueHandleFormInit();
        this.getCheckList();
      });
    },
    overdueHandleFormInit() {
      this.overdueHandleForm.overdueDisposeDesc = "";
      this.overdueHandleForm.overdueDisposeReson = "";
      this.overdueHandleForm.overdueDisposeUserId = "";
      this.overdueHandleForm.overdueLeaderUserId = "";
      this.overdueHandleForm.isWorkSheet = null;
      this.overdueHandleDialog = false;
    },
    selectTime(index) {
      let _this = this;
      let now = dayjs();
      this.$vux.datetime.show({
        cancelText: "取消",
        confirmText: "确定",
        format: "YYYY-MM-DD HH:mm",
        startDate: now.format("YYYY-MM-DD"),
        onConfirm(value) {
          if (!index) {
            _this.stopStepForm.startTime = dayjs(value);
          } else {
            _this.stopStepForm.endTime = dayjs(value);
          }
        },
        onHide(type) {
          if (type === "cancel") {
            // that.banci = value
          }
        }
      });
    },
    eventPutStopStep(item) {
      this.stopStepForm.id = item.id;
      this.stopStepForm.remark = item.remark;
      this.stopStepDialog = true;
    },
    eventDeleteStopStep(item) {
      this.stopStepForm.id = item.id;
      this.stopStepForm.remark = item.remark;
      this.deleteStopStepDialog = true;
    },
    stopStepDepChange(id, departmentName) {
      console.log(departmentName);
      this.stopStepShowTreeDepartment = {
        departmentName,
        id
      };
    },
    stopStepDepShowTreeFn(status) {
      // console.log(status)
      if (status) {
        this.$refs.selece_icon.$el.style.transform = "rotate(-180deg)";
      } else {
        this.$refs.selece_icon.$el.style.transform = "rotate(0deg)";
      }
      this.stopStepShowTree = status;
    },
    handleStopStep(tag) {
      if (!tag) {
        this.stopStepFormInit();
        return;
      }
      let errMsg = "";
      if (!this.stopStepForm.startTime || !this.stopStepForm.endTime) {
        errMsg = "请选择停车时间";
      } else if (
        this.stopStepForm.endTime.isBefore(this.stopStepForm.startTime)
      ) {
        errMsg = "结束时间请大于开始时间";
      } else if (this.stopStepForm.startTime.isBefore(dayjs())) {
        errMsg = "开始时间请大于现在的时间";
      } else if (!this.stopStepForm.remark) {
        errMsg = "请输入停车原因描述";
      }
      if (errMsg) {
        this.$vux.toast.show({ text: errMsg, type: "warn" });
        return;
      }

      this.stopStepForm.deviceId = this.deviceId;
      this.stopStepForm.departmentId = this.departmentId;
      this.stopStepForm.submitter = this.user.id;
      SpotCheckDao.putParkPlanSubmit(this.stopStepForm, data => {
        this.$vux.toast.show({
          text: "提交成功",
          type: "success"
        });
        this.stopStepFormInit();
        this.getParkPlanDetailList();
      });
    },
    handleDeleteStopStep(tag) {
      if (!tag) {
        this.stopStepFormInit();
        return;
      }
      this.stopStepForm.deviceId = this.deviceId;
      this.stopStepForm.departmentId = this.departmentId;
      SpotCheckDao.deleteParkPlanSubmit(this.stopStepForm, data => {
        this.$vux.toast.show({
          text: "删除成功",
          type: "success"
        });
        this.stopStepFormInit();
        this.getParkPlanDetailList();
      });
    },
    stopStepFormInit() {
      this.stopStepForm.departmentId = "";
      this.stopStepForm.startTime = "";
      this.stopStepForm.endTime = "";
      this.stopStepForm.remark = "";
      this.stopStepDialog = false;
    },
    
  }
};
</script>

<style lang="less" scoped>
.btn_disabled {
  background: #7e7f94 !important;
  border: 1px solid #7e7f94 !important;
}
.check_details_container {
  min-height: 100%;
  background: #22233f;
  .page_header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
  }
  .my_dialog {
    position: fixed;
    width: 100%;
    left: 0;
    z-index: 4999;
  }
  .deviceInfo {
    height: 100vh;
    padding: 46px 16px 20px;
    overflow: auto;
    border-radius: 4px;
    .info_list {
      margin-top: 13px;
      // background: #292a4d;
      &.hasExecute {
        .info {
          padding-bottom: 15px;
        }
      }
      &.work_sheet {
        margin-top: 0;
        margin-bottom: 20px;
        .info {
          padding: 0;
        }
      }
      .info {
        line-height: 0.7rem;
        font-size: 16px;
        padding: 8px 0;
        li {
          line-height: 23px;
          position: relative;
          display: flex;
          .openOrHide {
            overflow: hidden;
          }
          .toggle {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translate(0, -50%);
            color: rgba(255, 255, 255, 0.5);
            .text {
              font-size: 12px;
            }
          }
          .title {
            width: 80px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 16px;
            margin-right: 15px;
            /* text-align: justify;
              text-align-last: justify; */
          }
          .titleContent {
            flex: 1;
            font-size: 16px;
            color: #fff;
            word-wrap: break-word;
            white-space: normal;
            word-break: break-all;
            .person {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          &.img_box {
            padding-left: 80px;
            div {
              margin: 0 5px;
              width: 54px;
              height: 54px;
            }
          }
        }
      }
    }

    .status-tabs {
      margin: 4px -16px 0;
      display: flex;
      // align-items: center;
      // justify-content: space-around;
      background: #292a4d;
      text-align: center;
      .status-tab {
        width: 50%;
        padding: 6px 0px;
        outline: none;
        border: 1px solid rgba(69, 109, 230, 1);
        font-size: 16px;
        color: #456de6;
        background: transparent;
      }
      .status-tab.active-status-tab {
        color: #fff;
        background: #456de6;
      }
    }

    .btn_box {
      margin-top: 20px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      button {
        display: inline-block;
        padding: 1px 47px;
        border: none;
        outline: none;
        font-size: 12px;
        background: rgba(69, 109, 230, 0.8);
        border: 1px solid rgba(69, 109, 230, 1);
        border-radius: 2px;
        color: #fff;
        &.btn_1 {
          margin-right: 12px;
          &.addwidth {
            padding: 1px 77px;
          }
          &.active {
            background: rgba(110, 146, 255, 1);
          }
          &.removemargin {
            margin-right: 0;
          }
        }
        &.btn_2 {
          align-self: flex-end;
          &.yellow {
            background: #dd9710;
            border: 1px solid #dd9710;
            color: #fff;
            padding: 1px 35px;
            &.active {
              border: 1px solid #ebb44b;
              background: #ebb44b;
            }
          }
          &.active {
            border: 1px solid rgba(69, 109, 230, 1);
            background: rgba(110, 146, 255, 1);
          }
        }
      }
    }
    .check_desc,
    .workSheet_desc {
      margin-top: 12px;
      background: #292a4d;
      .title {
        font-size: 17px;
        color: rgba(255, 255, 255, 0.5);
        padding: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }
      .content {
        padding: 8px;
        display: flex;
        box-sizing: border-box;
        background-color: #22233f;
        .text_content {
          flex: 1;
          font-size: 14px;
          color: #fff;
        }
        .toggle_btn {
          width: 50px;
          .text_btn {
            font-size: 14px;
            color: #fff;
          }
        }
      }
    }
  }
  .overdue {
    .overdue-title {
      color: #fff;
      font-size: 16px;
      padding: 16px 0 4px;
      display: flex;
      justify-content: space-between;
      .batch-btn {
        color: #fff;
        font-size: 14px;
        background-color: #456de6;
        padding: 2px 12px 3px;
        border-radius: 4px;
      }
    }
    .overdue-list {
      padding: 8px 0;
    }
    .overdue-card {
      margin-bottom: 16px;
      .tip {
        &.status1,&.status4 {
          color: #4fa8e7;
        }
        &.status3 {
          color: #456de6;
        }
        &.status5 {
          color: #dd9710;
        }
        &.status9,
        &.status7 {
          color: #dd9710;
        }
      }

      .title-label {
        margin-left: -8px;
        border-radius: 20px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        font-size: 14px;
        padding: 0 12px 1px 8px;
        background-color: #456de6;
        margin-right: 8px;
      }
    }
    .overdue-card-body {
      margin-top: 8px;
      font-size: 14px;
      display: flex;
      flex-direction: column;
      .body-item {
        display: flex;
        align-items: center;
      }
      .body-item-state {
        margin-left: 8px;
        padding: 0 4px 2px;
        color: #456de6;
        border: 1px solid #456de6;
        border-radius: 2px;
      }
      .body-item-handle {
        display: flex;
        justify-content: space-between;
        .handle-btn {
          margin-left: 8px;
          flex: none;
        }
        .btn {
          color: #fff;
          font-size: 14px;
          background-color: #456de6;
          padding: 2px 11px 3px;
          border-radius: 12px;
        }
      }
      .ellipsis {
        // width: 80%;
        color: rgba(255, 255, 255, 0.6);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .body-other {
        padding-top: 8px;
        margin-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        .time {
          font-size: 14px;
          color: rgba(69, 109, 230, 1);
        }
      }
    }
    .modifiy-btn {
      display: flex;
      justify-content: flex-end;
      .handle-btn {
        margin-left: 8px;
        color: #fff;
        font-size: 14px;
        background-color: #456de6;
        padding: 2px 11px 3px;
        border-radius: 4px;
      }
    }
  }
}

.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}
.slide-enter,
.slide-leave-to {
  transform: translateY(-800px);
  opacity: 0;
}
.component-check-card {
  background: #292a4d;
  margin: 12px 0;
  .desc_box {
    padding: 8px;
    height: 80px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: keep-all;

      &.item_title {
        font-size: 17px;
        color: #fff;

        .tag {
          color: #4266d6;
          float: right;
          font-size: 15px;

          &.yellow {
            color: #dd9710;
          }
          &.green {
            color: #67c23a;
          }
          &.gray {
            color: #999;
          }
        }
      }

      &.time {
        font-size: 14px;
        color: rgba(69, 109, 230, 1);
      }
    }
  }
  .their {
    font-size: 14px;
    color: #999;
  }

  .dot {
    color: #456de6;
    margin-left: 4px;
  }

  .bottom_panel {
    display: flex;
    padding: 8px;
    box-sizing: border-box;

    .operation_per {
      width: 45.18%;
      font-size: 15px;
      text-align: left;
      color: #fff;

      .person {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .operation_btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      button {
        display: inline-block;
        padding: 1px 27px;
        border: none;
        outline: none;
        font-size: 12px;
        background: rgba(69, 109, 230, 0.8);
        border: 1px solid rgba(69, 109, 230, 1);
        border-radius: 2px;
        color: #fff;

        &.btn_1 {
          /* background:rgba(41,42,77,1);
                        border:1px solid rgba(69,109,230,1);
                        color:rgba(66,102,214,1); */
          margin-right: 12px;

          &.active {
            background: rgba(110, 146, 255, 1);
            /*  color: #fff; */
          }

          &.removemargin {
            margin-right: 0;
          }
        }

        &.btn_2 {
          align-self: flex-end;

          &.yellow {
            background: #dd9710;
            border: 1px solid #dd9710;
            color: #fff;
            padding: 1px 15px;

            &.active {
              border: 1px solid #ebb44b;
              background: #ebb44b;
            }
          }

          &.active {
            border: 1px solid rgba(69, 109, 230, 1);
            background: rgba(110, 146, 255, 1);
          }
        }
      }
    }
  }
}

.operator-dialog {
  /deep/.weui-dialog {
    padding: 20px;
    background: #ffffff !important;
    .main {
      text-align: left;
      margin-bottom: 20px;
      font-size: 14px;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transform: translateY(0);
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(-140%);
}
</style>
<style lang="less">
.overdue-handle-confirm {
  color: #333;
  .weui-cell {
    padding: 0;
  }
  .weui-dialog__hd {
    padding: 1.3em 1em 0.5em;
  }
  .weui-dialog__bd {
    padding: 0 1em 0.8em;
  }
  // .weui-textarea {
  //   color: #22233f;
  //   width: 98%;
  //   border-radius: 2px;
  // }

  .MoreDataPInner {
    width: 100%;
    color: #ffffff;
    background: #22233f;
  }

  .searchItem {
    .title {
      display: flex;
      align-items: center;
    }
    .inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 8px;
      > span {
        width: 85px;
        text-align: right;
        // flex: none;
      }
      .textarea {
        width: 100%;
        flex: none;
        border: 1px solid #eee;
        border-radius: 4px;
        textarea {
          width: 94%;
          color: #22233f;
          padding: 8px;
          font-size: 14px;
        }
      }
    }
  }
  .iu-select {
    height: 24px;
    width: 60%;
    padding: 2px 4px;
    border: none;
    outline: none;
    border: 1px solid #eee;
    border-radius: 2px;
    font-size: 14px;
    color: #22233f;
    background: transparent;
    &:invalid {
      color: #999;
    }
    option {
      background: rgba(255, 255, 255, 0.9);
    }
  }
}
</style>
